<template>
        <ul class="list">
            <li class="item" v-for="item in letters" :key="item" 
                @click="handleLetterClick" 
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
                :ref="item"
            >
                {{item}}
            </li>
        </ul>
   
</template>
<script>
export default {
    name:'CityAlphabet',
    props:{
        cities:Object
    },
    data(){//触摸的标识位
        return{
             touchStatus:false,
             startY:0,
             timer:null
        }
       
    },
    updated(){
        this.startY=this.$refs['A'][0].offsetTop;
    },
    computed:{//计算属性
        letters(){//定义数据
            const letters=[];
            for(let i in this.cities ){
                letters.push(i);
            }
            return letters;
        }
    },
    methods:{
        handleLetterClick(e){
            this.$emit('change',e.target.innerText);//向外触发事件
            // console.log(e.target.innerText);
        },
        handleTouchStart(){
            this.touchStatus=true;
        },
        handleTouchMove(e){
            if(this.touchStatus){
                // const startY=this.$refs['A'][0].offsetTop;
                // console.log(startY);
                if(this.timer){//函数节流
                    clearTimeout(this.timer);
                }
                this.timer=setTimeout(()=>{
                    const touchY=e.touches[0].clientY-79;
                    const index=Math.floor((touchY-this.startY)/20);
                    // console.log(index);
                    // console.log(touchY);
                    if(index>=0&&index<=this.letters.length){
                        this.$emit('change',this.letters[index]);
                    }
                },16)
                
                
            }
        },
        handleTouchEnd(){
            this.touchStatus=false;
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibies.styl';
    .list
        //垂直方向居中
        display  :flex
        flex-direction :column
        justify-content :center
        position :absolute
        top:1.58rem
        right :0
        bottom :0
        width :.4rem
        .item
            text-align :center
            line-height :.4rem
            color :$bgColor

</style>
